<template>
  <!-- eslint-disable -->
  <div>
    <el-form :model="form" label-width="80px">
      <el-card class="card">
        <el-form-item style="width: 600px" label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers='headerObj'
            
          >
            <img ref="img" v-if="form.photo" :src="form.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item style="width: 600px" label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="姓名">
          <el-input v-model="form.nickname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="电话">
          <el-input v-model="form.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item v-if="info.role == 'coach'" style="width: 600px" label="年龄">
          <el-input v-model="form.age" placeholder="请输入年龄" disabled></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date"
          ></el-date-picker>
        </el-form-item>

        <el-button style="margin-left: 50px" type="primary" @click="submitInfo"
          >提交</el-button
        >
      </el-card>
    </el-form>
    <!-- 预约练车 -->

    <el-card style="margin-top: 40px">
      
      <el-table :data="practiceList" border style="width: 100%">
        <el-table-column
          align="center"
          prop="title"
          label="项目"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="预约编号"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="练习科目"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="coach"
          label="教练"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="img"
          label="图片"
          width="100"
          class="imgwrap"
        >
          <template v-slot="{ row }">
            <img :src="row.img" alt />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="adress"
          label="地址"
          width="150"
        ></el-table-column>
        <el-table-column align="center" prop="time" label="练车时间"></el-table-column>
      </el-table>
      
      <el-table :data="examList" border style="width: 100%">
        <el-table-column
          align="center"
          prop="title"
          label="项目"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="考试编号"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="考试名称"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="school"
          label="驾校"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="img"
          label="考场图片"
          width="150"
          class="imgwrap"
          align="center"
        >
          <template v-slot="{ row }">
            <img :src="row.img" alt />
          </template>
        </el-table-column>
        <el-table-column
          prop="adress"
          label="考场地址"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="time"
          label="考试时间"
          width="200"
          align="center"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
/*eslint-disable*/
import { getInfo, updateInfo, practiceCar, Myexam } from "@/api/user";
import { mapState } from "vuex";
import { getToken } from "@/utils/auth";
export default {
  name: "userInfo",
  data() {
    
    return {
      headerObj:{token:getToken()},
      nickname: "",
      form: {
        date: "",
        photo: "",
        phone: "",
        nickname: "",
        username: "",
        role: "",
        id: "",
      },
      practiceList: [],
      examList: [],
    };
  },
  methods: {
    async getinfo() {
      let res = await getInfo();
      if (res.code == 200) {
        
        this.form.date = this.dayjs(res.data.date).format("YYYY-MM-DD HH:mm:ss"),
            (this.form.username = res.data.username),
            (this.form.nickname = res.data.nickname),
            (this.form.phone = res.data.phone),
            (this.form.photo = res.data.photo + `?token=${this.headerObj.token}`);
            (this.form.role = res.data.role), (this.form.id = res.data.id);
            this.form.age = res.data.age;
            this.form.gender = res.data.gender;
            this.nickname = res.data.nickname;
        
      }
    },
    handleAvatarSuccess(res, file) {
        console.log(res)
        this.$set(this.form,'photo',res+`?token=${this.headerObj.token}`)
    },
   
    async submitInfo() {
      let data = this.form;
       data.photo = this.form.photo.split('?')[0]
      console.log(this.form.photo,'上传前的url地址');
      let res = await updateInfo(data);
      if (res.code == 200) {
        this.form = {};
          (this.form.date = res.data.date),
          (this.form.username = res.data.username),
          (this.form.nickname = res.data.nickname),
          (this.form.phone = res.data.phone),
          (this.form.photo = res.data.photo + `?token=${this.headerObj.token}`);
         (this.form.role = res.data.role), (this.form.id = res.data.id);

        this.$message({
          message: res.message,
          type: "success",
        });
        this.$store.dispatch('user/getInfo')
      }
    },
    async getPractice() {
      let res = await practiceCar(this.nickname);
      if (res.code == 200) {
        this.practiceList = res.data;
        this.practiceList.forEach(item => {
            item.time = this.dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
            item.title = '预约练车'
        });
      }
    },
    async getExam() {
      let res = await Myexam(this.nickname);
      if (res.code == 200) {
        this.examList = res.data;
        this.examList.forEach(item => {
            item.time = this.dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
            item.title = '预约考试'
        });
      }
    },
  },

  beforeMount() {
    this.getinfo();
  },
  mounted() {
   
    


  },
  computed: {
    ...mapState({
      info: (store) => store.user.info,
    }),
  },
  watch: {
    nickname(newValue, oldValue) {
      this.getPractice();
      this.getExam();
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.box-card {
  width: 1200px;
  margin-left: 50px;
  margin-top: 50px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
img {
  height: 80px;
  width: 80px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
